<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'BBS_reply.jsp' starting page</title>
     <%
        //绝对路径
        pageContext.setAttribute("APP_PATH",request.getContextPath());
     %>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
</script>
	<link rel="stylesheet" href="jQuery/css/iziModal.min.css">
	<link rel="stylesheet" href="jQuery/css/style.css">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="jQuery/js/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="jQuery/js/iziModal.min.js" type="text/javascript"></script>
	
	<script >
			function reply(){
				var textarea_1 = document.getElementById('textarea_1');
				
				textarea_1.focus();
				location.href = "BBS_reply.jsp#textarea_1";
			}
	</script>
	<style type="text/css">
		.u1 li{list-style: none;float: right; }
		.u1 li a{color: #A7A7A7;}
		.d1{float: left}
		.t1{margin-left: 280px;}
		.textarea_1{width: 500px;height: 280px}
		.textarea_p{width: 500px;height: 50px;background-color: wheat;border-top-left-radius: 10px;border-top-right-radius: 10px;}
		#modal{background-image:url(image/pk_2.jpg);}
		#modal_2{background-image: url(image/pk_1.jpg)}
	</style>
  </head>
  
  <body id="b">
    <div class="container" >
	<div class="row clearfix">
		<div class="col-md-12 column">
			<ul class="nav nav-pills">
				<li class="active">
					 <a href="#"> <span class="badge pull-right">3</span> Heart——梦</a>
				</li>
				<li>
					 <a href="#"> <span class="badge pull-right">16</span> More</a>
				</li>
			</ul>
		</div>
	</div>
</div>

<div class="container">
  <div class="row clearfix">
	<div class="col-md-12 column">
			
		</div><ul class="nav nav-tabs">
				<li>
					 <a href="BBS_game.jsp">首页</a>
				</li>
				<li class="">
					 <a href="#">圈子</a>
				</li>
				<li class="">
					 <a href="#">专题</a>
				</li>
				
				<li>
					 <a href="BBS_game.jsp">英雄皮肤</a>
				</li>
			  <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <ul class="nav nav-tabs">
            <li class="">
					<img src="image/${session.userData.avatar }" class="img-circle" width="50" height="40">
				</li>
			  <li class="">
					 <a href="#">${session.user.loginName }</a>
				</li>
			  </ul>
            
	  </ul>
	</div>
	

</div>
<hr>
<div class="col-lg-4 col-lg-offset-5">
	<div>
		
		<p>
			<span style="color:lightslategrey">&nbsp;&nbsp;
				 <span id="avatar"></span>
			   楼主: <span id="loginName"></span>&nbsp;&nbsp;
			   时间：<span id="createTime"></span>&nbsp;&nbsp;
			   <!--<s:date name="createTime" format="yyyy-MM-dd"/>-->
			   </span>
		</p>
	</div>

	
</div>
<div class="container">
	 <div class="row clearfix">
		<div class="col-md-12 column col-lg-10 col-lg-offset-1" style="background-color: antiquewhite">
			<div  id="post-list">
			
			 
			</div>
			<hr>
			<ul class="u1">
				<li >&nbsp;&nbsp;|&nbsp;&nbsp;
					 <a href="BBS_reply.jsp#textarea_1" style="color: #1200FF" onclick="reply()">我要回答</a>
				</li>
				
				<li >&nbsp;&nbsp;|&nbsp;&nbsp;
					 <a href="#">邀请回答</a>
				</li>
				
				<li >&nbsp;&nbsp;|&nbsp;&nbsp;
					 <a href="#">分享</a>
				</li>
				
				<li >
					 <a href="#">举报</a>
				</li>
				
			</ul>
			
		</div>
	</div>
</div>
<div class="container" style="height: 742px; ">
	<div class="row clearfix">
	<p></p>
	<div class="col-md-12 column col-lg-10 col-lg-offset-1" style="background-color: antiquewhite;">
		<h3 id="replyCount"></h3>
	</div>
		<div class="col-md-12 column col-lg-10 col-lg-offset-1" style="background-color: antiquewhite; height: 709px"  id="post-reply">
	
			
		</div>
	</div>
</div>
<div class="col-sm-5 col-sm-offset-7">
	
<ul class="pagination" id="page">

		</ul>
</div>



<div class="col-sm-5 col-sm-offset-7">
	
<ul class="pagination" id="page">

			<ul style="width: 948px; list-style: none;">
				<li><dl>
						<dt>
							<img src="image/'+  avatar   +'" class="img-circle" width="50px"
								height="50px">
						</dt>
						<dt>
							<a href="javascript:void(0);" onclick="givePraise('+ id +', 0);"
								class="btn btn-info btn-lg"><span
								class="glyphicon glyphicon-thumbs-up" id="'+id+'"></span></a>
						</dt>
						<dd style="text-indent: 6em">回答：</dd>
						<dt>
							<textarea name="content" class="textarea_1" id="textarea_1" style="resize: none; height: 52px; width: 705px">	
							</textarea>
						</dt>
						<dd style="text-indent: 6em">
							评论：
						</dd>
						<dd style="float: right;">
							<a href="#" style="color: #1200FF">评论</a>
						</dd>
					</dl></li>
			</ul>

		</ul>
</div>

<hr>
<hr>
<br>
	<div>
	<table class="t1">
	<tr>
		<td scope="2">
		<a href="#" class="trigger">登录</a>
		&nbsp;&nbsp;|&nbsp;&nbsp;
		<a href="#" class="trigger_2">注册</a>
		</td>
	</tr>
	<tr>
		<td>
		
		</td>
		
	</tr>
		<form action="addReply" method="post">
	<tr>
		<td>
		<p class="textarea_p"></p>
		<textarea name="content" class="textarea_1" id="textarea_1" style="resize: none;">	
		</textarea>
		</td>
		</tr>	
		<tr>
			<td>
			请遵守论坛公约言论规则，不得违反国家法律法规
			<button type="submit" class="btn btn-success">回答</button>
			</td>
		</tr>
		</form>
	</table>	
	
	
  </body>
  <script type="text/javascript" src="${APP_PATH}/jQuery/jquery-1.10.1.js"></script>
  <script type="text/javascript">
 
  	ajaxGetAllCards();
  	page(1, 10);
  	// givePraise(id, 0);
  	function ajaxGetAllCards(){
  		var addPost='';
  		var loginName='';
  		var createTime='';
  		var avatar='';
  		$.ajax({
  			url:'${APP_PATH}/showAll.action?post.user.id=${session.id}',
  			type:"POST",
  			dataType:"json",
  			processData:false,
  			success:function(post){
  			//编写网页元素
  			addPost +='<h2>' +post.model.title+ '</h2><p style="text-indent: 2em">' +post.model.content+ '</p>';
  			loginName +=post.model.user.loginName;
  			createTime +=post.model.createTime;
  			avatar += '<img src="image/'+post.model.user.userData.avatar+'" style="width: 20px;height: 20px">';
  			//添加元素
  			$("#post-list").html(addPost);
  			$("#loginName").html(loginName);
  			$("#createTime").html(createTime);
  			$("#avatar").html(avatar);
  			}
  		});
  	}
  	
  	//点赞功能
  	function givePraise(id, type){
  		if(type == null || type == undefined) {
  			type = 0;
  		}
  		$.ajax({
  			url:'${APP_PATH}/givePraise',
  			type:"POST",
  			dataType:"json",
  			data: {"reply.id": id, "type": type},
  			success:function(result){
  			
  				if(type == 0) {
  					$('#'+id).html("已赞").parents("a").attr("onclick", 'givePraise('+id+', 1)');
  				} else {
  					$('#'+id).html("已取消").parents("a").attr("onclick", 'givePraise('+id+', 0)');
  				}
  			}
  		});
  	}
  	
  	function page(pageNo, pageSize) {
	  	var addReply='';
	  	var nextPage='';
	  	var replyCount='';
  		//pageNo = (pageNo == null || pageNo == '' || pageNo == undefined) ? 1 : pageNo;
  		//pageSize = (pageSize == null || pageSize == '' || pageSize == undefined) ? 10 : pageSize;
	  	$.ajax({
	  			url:'${APP_PATH}/showReply',
	  			type:"POST",
	  			dataType:"json",
	  			// processData:false,
	  			data: {"reply.post.id": ${session.id}, "page": pageNo},
	  			success:function(data){
	  				if(data != null) {
	  				
	  					if(data.pageBean != null && data.pageBean != undefined) {
	  					
	  						 var list = data.pageBean.list;
	  						 if(list != null && list != undefined && list.length > 0) {
	  						 
					  				for(var i=0;i < list.length; i++){
					  					var user = list[i].user;
					  					var loginName = user.loginName;
					  					var time = list[i].time;
					  					var praise = list[i].praise;
					  					var content = list[i].content;
					  					var id = list[i].id;
					  					if(user != null && user != '' && user.userData != null) {
					  						var avatar = user.userData.avatar;
						  					//编写网页元素
						  					addReply +=	'<ul style="width: 948px; list-style: none;" ><li><dl><dt><img src="image/'+  avatar   +'" class="img-circle" width="50px" height="50px">'+loginName+'&nbsp; '+ time +'</dt><dt><a  href="javascript:void(0);" onclick="givePraise('+ id +', 0);" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-thumbs-up" id="'+id+'">赞'+ praise +'</span></a></dt><dd  style="text-indent: 6em">回答：'+ content +'</dd><dd style="float: right;"><a href="#" style="color: #1200FF">评论</a></dd></dl></li></ul>';
						  					//addReply +='<p>'+data.pageBean.list[i].content+'</p>';
					  					}
					  				}
			  					}
			  				
			  				nextPage += '<li><a href="javascript:void(0);"style="border: none;">第'+data.page+'页/共'+data.pageBean.totalPage+'页</a></li><li><a href="javascript:void(0);" onclick="page(1, 5)">首页</a></li><li><a href="javascript:void(0);" onclick="page('+(data.pageBean.prePage)+', 5)">上一页</a></li><li> <a href="javascript:void(0);" onclick="page('+(data.pageBean.nextPage)+',5)">下一页</a></li><li><a href="javascript:void(0);" onclick="page('+(data.pageBean.totalPage)+', 5)">尾页</a></li>';
			  				replyCount +='共'+data.pageBean.totalCount+'条评论';
			  				
		  					//添加元素
		  					$("#post-reply").html(addReply);
		  					$("#page").html(nextPage);
		  					$("#replyCount").html(replyCount);
		  				}
	  				}	
	  			}
	  		});
  	}
  </script>
 
</html>
